@import "ui-variables";
@import "ui-mixins";

.loading-spinner(@size) {
    width: @size;
    height: @size;
    display: block;
    background-image: url(images/octocat-spinner-128.gif);
    background-repeat: no-repeat;
    background-size: cover;

    &.inline-block {
        display: inline-block;
    }
}
.loading-spinner-large {
    .loading-spinner(64px);
}
.loading-spinner-medium {
    .loading-spinner(50px);
}
.loading-spinner-small {
    .loading-spinner(32px);
}
.loading-spinner-tiny {
    .loading-spinner(20px);
}

// Much learning from:
// http://css-tricks.com/html5-progress-element/

@progress-height: 0.25rem;

progress {
    height: @progress-height;
    background: @text-color;
    border-radius: 0;
    overflow: hidden;
    -webkit-animation: none;
    -webkit-appearance: none;
}
progress::-webkit-progress-bar {
    background-color: transparent;
}
progress::-webkit-progress-value {
    border-radius: 0;
    background: @base-color;
    box-shadow: 0 0 0.5rem #FFF;
}
progress[value] {
    background: fade(@base-color, 20%);
    -webkit-animation: none;
}
